<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区顶部滑动模块</title>
</head>

<body>
    <link rel="stylesheet" type="text/css" href="index.css">

    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>

    <div class="panel">
        <h4 class="panel-title" title="推荐">
            <span class="title-theme">推荐</span>
        </h4>
        <div #swiperRef="" class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" role="group" aria-label="1 / 8">
                    <div class="plate-card"><a title="zibll需求提交" href="https://www.zibll.com/forum/3315.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2021/12/截屏2022-01-05-下午2.48.12.png"
                                    alt="zibll需求提交-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover"></div>
                            <div class="title text-ellipsis mt10">zibll需求提交</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="208人关注 1649次互动">10.3W+热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3315"><text>关注</text></a></div>
                </div>
                <div class="swiper-slide swiper-slide-prev" role="group" aria-label="2 / 8">
                    <div class="plate-card"><a title="zibll综合交流" href="https://www.zibll.com/forum/3317.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2021/12/截屏2022-01-05-下午2.50.48-1.png"
                                    alt="zibll综合交流-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover"></div>
                            <div class="title text-ellipsis mt10">zibll综合交流</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="102人关注 1665次互动">8W+热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3317"><text>关注</text></a></div>
                </div>
                <div class="swiper-slide swiper-slide-active" role="group" aria-label="3 / 8">
                    <div class="plate-card"><a title="zibll美化交流分享" href="https://www.zibll.com/forum/3626.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2022/01/4D36FFE3-0A9F-4C98-879E-1400AB81BD4A.png"
                                    alt="zibll美化交流分享-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover">
                            </div>
                            <div class="title text-ellipsis mt10">zibll美化交流分享</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="143人关注 3514次互动">6.8W+热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3626"><text>关注</text></a></div>
                </div>
                <div class="swiper-slide swiper-slide-next" role="group" aria-label="4 / 8">
                    <div class="plate-card"><a title="zibll教程分享" href="https://www.zibll.com/forum/3496.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2022/01/截屏2022-01-05-下午2.45.42.png"
                                    alt="zibll教程分享-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover"></div>
                            <div class="title text-ellipsis mt10">zibll教程分享</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="160人关注 1898次互动">6.3W+热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3496"><text>关注</text></a></div>
                </div>
                <div class="swiper-slide" role="group" aria-label="5 / 8">
                    <div class="plate-card"><a title="zibll BUG反馈" href="https://www.zibll.com/forum/3313.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2021/12/截屏2022-01-05-下午1.53.02.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_500,h_500"
                                    alt="zibll BUG反馈-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover">
                            </div>
                            <div class="title text-ellipsis mt10">zibll BUG反馈</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="89人关注 602次互动">3.9W+热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3313"><text>关注</text></a></div>
                </div>
                <div class="swiper-slide" role="group" aria-label="6 / 8">
                    <div class="plate-card"><a title="版务&amp;公告" href="https://www.zibll.com/forum/3310.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2021/12/截屏2022-01-05-下午2.24.11.png"
                                    alt="版务&amp;公告-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover"></div>
                            <div class="title text-ellipsis mt10">版务&amp;公告</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="47人关注 45次互动">1.3W+热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3310"><text>关注</text></a></div>
                </div>
                <div class="swiper-slide" role="group" aria-label="7 / 8">
                    <div class="plate-card"><a title="WordPress插件" href="https://www.zibll.com/forum/3510.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2022/01/截屏2022-01-05-下午2.03.51.png"
                                    alt="WordPress插件-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover">
                            </div>
                            <div class="title text-ellipsis mt10">WordPress插件</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="43人关注 255次互动">6652热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3510"><text>关注</text></a></div>
                </div>
                <div class="swiper-slide" role="group" aria-label="8 / 8">
                    <div class="plate-card"><a title="聊天灌水" href="https://www.zibll.com/forum/3503.html">
                            <div class="plate-thumb"><img
                                    src="https://oss.zibll.com/zibll.com/2022/01/截屏2022-01-05-下午2.18.51.png"
                                    alt="聊天灌水-Wordpress主题模板-zibll子比主题" class="forum-thumbnail fit-cover"></div>
                            <div class="title text-ellipsis mt10">聊天灌水</div>
                            <div class="mt3 px12 muted-2-color text-ellipsis count" data-toggle="tooltip" title=""
                                data-original-title="15人关注 70次互动">4363热度</div>
                        </a><a href="javascript:;" class="btn-follow but jb-pink but-plate btn-block mt20 signin-loader"
                            data-id="3503"><text>关注</text></a></div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!--
            <div class="swiper-pagination"></div>
            -->
        </div>
    </div>





    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.mySwiper', {
            loop: true,
            speed: 1500,
            slidesPerView: 6,
            spaceBetween: 10,
            centeredSlides: true,
            watchSlidesProgress: true,

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

    </script>


</body>

</html>